<template>
    <div id="blog">
        <el-container id="main">
            <el-header class="blog-header tl-width-100-percent tl-text-center">
                <h1 class="sb-title tl-font-30-px tl-text-shadow-mini tl-color-white tl-margin-top-100">
                    <span v-text="blog.title"></span>
                </h1>
                <div class="postMeta tl-color-white-8 tl-text-shadow-small tl-font-14-px">
                    <i class="iconfont icon-time tl-margin-0-5"></i>发表于<span v-text="moment(blog.createTime).format('yy-MM-DD hh:mm:ss')"></span>
                    <i class="iconfont icon-browse tl-margin-0-5"></i>阅读次数：{{ blog.views }}
                    <i class="iconfont icon-interactive tl-margin-0-5"></i>评论次数：0
                </div>
                <div>
                    <a v-for="type in blog.types" :key="`type${type.id}`" :href="`/web/categories/${type.name}`"
                       target="_blank">
                        <span class="tl-color-white tl-font-14-px article-info-tag article-tag-class-color tl-margin-5">
                            <strong>{{ type.name }}</strong>
                        </span>
                    </a>
                </div>
            </el-header>
            <el-container class="tl-width-85-percent tl-margin-0 tl-margin-auto">
                <el-main class="tl-margin-top--75">
                    <el-card class="tl-border-radius-8 tl-padding-0-20 tl-margin-0 tl-margin-auto">
                        <div slot="header">
                            <!-- <span class="tl-color-white tl-font-14-px article-info-tag tl-margin-5" style="background-color: #cf1322;">{{blog.flag}}</span>-->
                            <span v-if="blog.flag === 'original'" class="tl-border-radius-8 tl-color-white tl-font-16-px article-info-tag tl-margin-5"
                                  style="background-color: #F56C6C; padding: 3px 10px">原创</span>
                            <span v-else-if="blog.flag === 'repost'" class="tl-border-radius-8 tl-color-white tl-font-16-px article-info-tag tl-margin-5"
                                  style="background-color: #55d9a3; padding: 3px 10px">转载</span>
                            <span v-else class="tl-border-radius-8 tl-color-white tl-font-16-px article-info-tag tl-margin-5"
                                  style="background-color: #70a1ff; padding: 3px 10px">翻译</span>
                            <div class="tl-float-right">
                                <span v-for="tag in blog.tags" :key="`tag${tag}`" class="tl-font-weight-700 tl-color-white tl-font-14-px
                                      article-info-tag article-tag-color tl-margin-5">#{{ tag }}</span>
                                <a href="javascript:void(0)" @click="editBlog(blog.id)" style="color: #8FB0C9"
                                   class="tl-margin-left-20 tl-a" v-if="is_login">编辑</a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <article v-html="blog.render" id="context" class="js-toc-content tl-text typo" ref="artContent"></article>
                        <el-divider></el-divider>
                        <el-card style="background-color: #F8FAFC; line-height: 1.5rem" class="tl-font-14-px"
                                 shadow="hover">
                            <div class="tl-v-center">
                                <i style="color: #249FF8 !important;" class="iconfont icon-avatar"></i>
                                <span style="color: #999" class="tl-margin-left-5">文章作者: {{ blog.nickname }}</span>
                            </div>
                            <div class="tl-v-center">
                                <i style="color: #39b54a !important;" class="iconfont icon-link"></i>
                                <span style="color: #999" class="tl-margin-left-5">文章链接:
                                    <a :href="location_href">{{ location_href }}</a>
                                </span>
                            </div>
                            <div class="tl-v-center">
                                <i style="color: #f3b243 !important;" class="iconfont icon-share"></i>
                                <span style="color: #999" class="tl-margin-left-5">版权声明: 本博客所有文章除特別声明外，均采用
                                    <a class="typo-a" target="_blank" href="https://creativecommons.org/licenses/by/4.0/deed.zh">CC BY 4.0</a>
                                    许可协议。转载请注明来源 {{ blog.nickname }} !
                                </span>
                            </div>
                        </el-card>
                        <el-divider></el-divider>
                        <div class="tl-text-center">
                            <tl-reward :tabs-style="{border: '1px solid rgba(0, 0, 0, .1)'}"/>
                        </div>
                    </el-card>
                    <el-card style="position: relative" id="comments"
                             class="tl-overflow-hidden tl-border-radius-8 tl-padding-20 tl-margin-top-20">
                        <div style="display: flex; align-items: center" slot="header">
                            <i class="iconfont icon-comments tl-font-24-px"></i>
                            <span class="tl-margin-left-5 tl-font-24-px tl-margin-0">
                                <strong>评论</strong>
                            </span>
                        </div>
                        <div id="gitalk-container"></div>
                        <div class="el-loading-mask" v-if="!blog.commentable">
                            <div class="el-loading-spinner">
                                <i class="el-icon-remove-outline"></i>
                                <p class="el-loading-text tl-font-16-px">不能评论，请联系管理员~</p>
                            </div>
                        </div>
                    </el-card>
                </el-main>
                <el-aside class="tl-padding-20">
                    <tl-sticky sticky-top="80">
                        <el-card>
                            <div id="js-toc"></div>
                        </el-card>
                    </tl-sticky>
                </el-aside>
            </el-container>
        </el-container>
        <div class="show" :class="this.showWeChat ? 'show-vis' : 'show-hid'">
            <el-tooltip :hide-after="600" :enterable="false" content="评论" placement="left">
                <div class="showWeChat tl-vh-center tl-margin-bottom-10" @click="scrollDown('comments', 70)">
                    <i class="iconfont icon-comments"></i>
                </div>
            </el-tooltip>
            <el-popover trigger="hover" content="微信阅读" placement="left">
                <div slot="reference" class="showWeChat tl-vh-center tl-margin-bottom-10" @click="viewWeChat">
                    <i class="iconfont icon-wechat"></i>
                </div>
            </el-popover>
            <el-backtop :visibility-height="0" :bottom="50" :right="20">
                <i class="el-icon-caret-top"></i>
            </el-backtop>
        </div>
    </div>
</template>

<script>
import '@/assets/css/tocbot.css'
import tocbot from 'tocbot'
import moment from 'moment';
import 'gitalk/dist/gitalk.css' // 评论样式
import Gitalk from 'gitalk' // 评论
import '@/assets/css/typo.less'
import { scrollDown } from '@/assets/js/utils'
import Prism from 'prismjs'
import TlSticky from '@/components/TlSticky';
import TlReward from '@/components/TlReward';
import { getBlog } from '@/api/blog/blog';
import { getToken } from '@/utils/auth'; // 代码高亮
export default {
    name: 'Blog',
    components: { TlReward, TlSticky },
    data: function () {
        return {
            showWeChat: false,
            show_toc: false,
            blog: {}
        }
    },
    methods: {
        moment,
        viewWeChat: function () {
            console.log(123)
        },
        scrollDown (element, t) {
            scrollDown(element, t)
        },
        // 给h标签添加id
        addMao () {
            const nodes = this.$refs.artContent.children;
            console.log(nodes.length)
            for (let i = 0; i < nodes.length; i++) {
                const node = nodes[i];
                const reg = /^H[1-6]$/;
                if (reg.exec(node.tagName)) {
                    if (node.firstElementChild !== null) {
                        if (!this.show_toc) {
                            this.show_toc = true
                        }
                        node.id = node.firstElementChild.id;
                        node.firstElementChild.removeAttribute('id');
                    }
                }
            }
        },
        async getBlog () {
            const res = await getBlog(this.$route.params.id);
            if (res.code === 200) {
                this.blog = res.data;
            }
        },
        editBlog: function (id) {
            window.open(this.$router.resolve({ path: '/admin/blog/add', query: { id: id } }).href, '_blank');
            // this.$router.push({ path: '/admin/blog/add', query: { id: id } })
        },
        handleScroll () {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            this.showWeChat = scrollTop > 400;
        }
    },
    created: function () {
        this.getBlog().then(() => {
            const hasToken = getToken()
            if (!Object.keys(this.blog).length || (!this.blog.status && !hasToken)) {
                console.log(this.blog.status)
                this.$router.push('/404');
            }
            this.$nextTick(() => {
                tocbot.init({
                    tocSelector: '#js-toc', // 要把目录添加元素位置，支持选择器
                    contentSelector: '.js-toc-content', // 获取html的元素
                    headingSelector: 'h1, h2, h3', // 要显示的id的目录
                    hasInnerContainers: false,
                    orderedList: false
                });
                Prism.highlightAll()
            })
        })
        // 监听页面滚动事件
        window.addEventListener('scroll', this.handleScroll)
    },
    destroyed () {
        window.removeEventListener('scroll', this.handleScroll)
    },
    mounted () {
        const gitalk = new Gitalk({
            clientID: '56cded58bb2a84e6f019', // GitHub Application Client ID
            clientSecret: '1e6392c942664d72c16c4ec914bd3943bf9ce5cc', // GitHub Application Client Secret
            repo: 'blog-comment', // 存放评论的仓库
            owner: 'lzyws739307453', // 仓库的创建者，
            admin: ['lzyws739307453'], // 如果仓库有多个人可以操作，那么在这里以数组形式写出
            id: location.hash // 用于标记评论是哪个页面的，确保唯一，并且长度小于50
        })
        gitalk.render('gitalk-container'); // 渲染Gitalk评论组件
    },
    computed: {
        is_login () {
            return getToken()
        },
        location_href () {
            let url = window.location.href
            const end = window.location.href.indexOf('#')
            if (end !== -1) {
                url = url.substring(0, end);
            }
            return url
        }
    }
}
</script>
<style lang='less' scoped>
.show {
    right: 20px;
    bottom: 90px;
    position: fixed;
    z-index: 5;
}

.showWeChat {
    background-color: #FFF;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #409EFF;
    font-size: 20px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .12);
    cursor: pointer;
}

.show-hid {
    opacity: 0;
    visibility: hidden;
    filter: Alpha(opacity=0);
    transition: opacity .3s, visibility .3s; /* 过渡动画 */
}

.show-vis {
    opacity: 1;
    visibility: visible;
    filter: Alpha(opacity=100);
    transition: opacity .3s, visibility .3s; /* 过渡动画 */
}

.article-tag-color {
    background-color: #6fa3ef;
}

.article-tag-class-color {
    background-color: #e8a258;
}

.article-info-tag {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 4px;
    text-transform: uppercase;
    padding: 0 5px;
    height: 24px;
    line-height: 24px;
    width: fit-content;
    width: -moz-fit-content;
}

.postMeta {
    font-weight: 700;
}

.blog-header {
    height: 300px !important;
    background: url("https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp") center center / cover no-repeat rgb(34, 34, 34);
}

.sb-title {
    margin: 120px 0 5px 0;
    letter-spacing: 2px;
    font-weight: 700;
    -webkit-animation: fade-in-down 1s;
    animation: fade-in-down 1s both;
    -webkit-animation-delay: .6s;
    animation-delay: .5s;
}

@keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

</style>
